<!-- pages/login/components/mobile.vue -->
<script lang="ts">
import { ref } from 'vue';

export default {
  options: {
    styleIsolation: 'shared',
  },
  setup() {
    // 1. 倒计时组件的显示和隐藏
    const showCountDown = ref(false)
    // 1.1 获取验证码
    const getCode = () => {
      // 1.1.1 显示倒计时组件
      showCountDown.value = true
    }

    return { showCountDown, getCode }
  }
}

</script>

<template>
  <uni-forms class="login-form" ref="form">
    <uni-forms-item name="name">
      <uni-easyinput :input-border="false" :clearable="false" placeholder="请输入手机号" placeholder-style="color: #C3C3C5" />
    </uni-forms-item>
    <uni-forms-item name="name">
     
      <uni-easyinput :input-border="false" :clearable="false" placeholder="请输入验证码" placeholder-style="color: #C3C3C5" />
      <!-- 获取验证码 和倒计时    -->
      <text class="text-button" v-if="!showCountDown" @click="getCode">获取验证码</text>
      <!-- 倒计时组件 -->
      <view class="text-button" v-else>
        <!-- 倒计时时间到触发事件 timeup-->
        <uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="59"
          @timeup="showCountDown = false" />s后重新获取
      </view>
    </uni-forms-item>

    <view class="agreement">
      <radio :checked="false" color="#16C2A3" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button">登 录</button>
  </uni-forms>
</template>

<style lang="scss">
@import './styles.scss';
</style>